<template>
    <div class="h-full flex flex-col">
        <el-form :inline="true" :model="searchform" style="width:100%">
            <div class="flex justify-between w-full">
                <el-form-item>
                    <el-button type="primary" :icon="Plus" @click="openDialog('add')">新增</el-button>
                    <el-button :icon="Refresh" @click="getList">刷新</el-button>
                </el-form-item>
                <el-space :size="1">
                    <el-form-item label="文章标题">
                        <el-input v-model="searchform.title" placeholder="请输入文章标题" clearable style="width:200px;"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getList" :icon="Search">查询</el-button>
                        <el-button @click="getList" :icon="Refresh">重置</el-button>
                    </el-form-item>
                </el-space>
            </div>
        </el-form>
        <div class="table-section flex-1">
            <div class="h-full flex flex-col gap-5 justify-between">
                <el-table border :data="tableData.list">
                    <el-table-column prop="title" label="文章标题" align="center"/>
                    <el-table-column prop="description" label="文章描述" align="center"/>
                    <el-table-column prop="title" label="文章分类" align="center"/>
                    <el-table-column prop="status" label="是否公开" align="center">
                        <template #default="scope">
                            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="setStatus(scope.row.id,scope.row.status)"></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createdAt" label="创建时间" align="center"/>
                    <el-table-column prop="action" label="操作" fixed="right" width="300px" align="center">
                        <template #default="scope">
                            <el-tooltip content="查看" placement="top">
                                <el-button type="primary" :icon="View" circle plain @click="openDialog('preview',scope.row)" size="small"/>
                            </el-tooltip>

                            <el-tooltip content="编辑" placement="top">
                                <el-button type="primary" :icon="Edit" circle plain @click="openDialog('update',scope.row)" size="small"/>
                            </el-tooltip>

                            <el-tooltip content="删除" placement="top">
                                <el-button type="danger" :icon="Delete" circle plain @click="deleteItem(scope.row)" size="small"/>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    :total="tableData.total"
                    v-model:current-page="tableData.page"
                    v-model:page-size="tableData.size"
                    :page-sizes="[10, 50, 100, 200]"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                />
            </div>
        </div>

        <dialog-add-edit ref="dialogRef" @update="getList"></dialog-add-edit>
        <dialog-preview ref="dialogPreview"></dialog-preview>


    </div>

</template>
<script setup>
import { ref, reactive, nextTick, useTemplateRef, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Delete, Refresh, Edit, Search, Share, Plus, PictureFilled, View } from '@element-plus/icons-vue'
import articleApi from 'api/model/article.js'
import DialogAddEdit from './dialog-add-edit.vue'
import DialogPreview from './dialog-preview.vue'

/**
 * 搜索相关字段
 */
const searchform = reactive({
    title: '',
    status: '',
})

/**
 * 表格相关字段
 */
const tableData = reactive({
    list: [],
    total: 0,
    page: 1,
    size: 10
})

/**
 *  获取列表
 */
async function getList () {
    const { code, data } = await articleApi.list.get({
        page: tableData.page,
        size: tableData.size,
    })
    if (code === 200) {
        const { list = [], total } = data
        tableData.list = list
        tableData.total = total
    } else {
        tableData.list = []
        tableData.total = 0
    }
}

/**
 * 设置文章状态
 */
async function setStatus (id, status) {
    const { code, data } = await articleApi.setStatus.post({
        id,
        status
    })
    if (code === 200) {
        ElMessage.success('设置成功')
        getList()
    } else {
        ElMessage.error(data.msg)
    }
}

/**
 * 分页的每页数量改变
 * @param data
 */
function handleSizeChange (data) {
    tableData.size = data
    tableData.page = 1
    getList()
}

/**
 * 分页的页码改变
 * @param data
 */
function handlePageChange (data) {
    tableData.page = data
    getList()
}

/**
 * 打开编辑弹窗
 */
const dialogEditRef = useTemplateRef('dialogRef')
const dialogPreviewRef = useTemplateRef('dialogPreview')

function openDialog (type, item) {
    if (type === 'add' || type === 'update') {
        dialogEditRef.value.openDialog(type, item)
    } else if (type === 'preview') {
        dialogPreviewRef.value.openDialog(item)
    }
}

/**
 * 删除用户操作
 */
function deleteItem (id) {
    /*删除二次确认*/
    ElMessageBox.confirm('此操作将永久删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(async () => {
        const { code, data = [] } = await articleApi.delete.get({ id })
        if (code === 200) {
            tableData.page = 1
            getList()
            ElMessage.success('删除成功')
        } else {
            ElMessage.error(data.msg)
        }
    }).catch(() => {
        ElMessage.info('取消删除')
    })
}

onMounted(() => {
    getList()
})

</script>


<style>

.table-section {
}
</style>

